<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  省：<select name="" id="province">

  </select>
  市：<select id="city">

  </select>
  <script>
    var province = ["请选择", "广东", "河南", "河北"]
    var city = [
      ["请选择"],
      ["深圳", "广州", "中山", "东莞", "珠海"],
      ["郑州", "南阳", "信阳", "洛阳", "鹤壁"],
      ["石家庄", "邯郸", "廊坊", "唐山", "秦皇岛"]
    ]
    // var areas = [
    //   [
    //     ["请选择"]
    //   ],
    //   [
    //     ["龙岗", "南山", "福田"],
    //     ["天河", "白云", "越秀"]
    //   ],
    //   [
    //     [
    //       "金水", ""
    //     ]
    //   ]
    // ]
    var provinceEle = document.getElementById("province");//省的下拉外套
    function loadProvice() {
      var str = ''
      for (var i = 0; i < province.length; i++) {
        str += `
            <option value="${i}">${province[i]}</option>
          `
      }
      provinceEle.innerHTML = str
    }
    loadProvice()
    // 给省的下拉绑定change事件
    var cityEle = document.getElementById("city")//市的下拉框元素
    provinceEle.onchange = function () {
      var proIndex = this.value; //省的下标
      // 加载市
      // city[proIndex] 对应省的下标的市的数组
      var str = ''
      for (var j = 0; j < city[proIndex].length; j++) {
        str += `
            <option value="${j}">${city[proIndex][j]}</option>
          `
      }
      cityEle.innerHTML = str;
    }

  </script>
</body>

</html>